<template>
	<div class="login-container">
	<div class="login-box">
   <el-form
      ref="ruleFormRef"
      style="max-width: 96%"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="demo-ruleForm"
      :size="formSize"
    >
	<h1>东软环保公众监督平台</h1>
	<h2>————网格员端————</h2>
      <el-form-item label="登录编码" prop="userName"  >
        <el-input v-model="ruleForm.userName" placeholder="请输入登录编码"/>
      </el-form-item>
      <el-form-item label="密码" prop="password" >
        <el-input v-model="ruleForm.password" placeholder="请输入密码"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm" >
          登录
        </el-button>
      </el-form-item>
<!--	  <div class="register-link">
	        还没有账号？<router-link to="/register">立即注册</router-link>
	      </div>-->
    </el-form>
  </div>
  </div>
</template>

<script setup>
import { reactive, ref } from 'vue'
import axios from 'axios'
import qs from 'qs'
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
const formSize = ref('default')
const ruleFormRef = ref()
let ruleForm = reactive({
  userName: '',
  password: '',
})
let myrules=reactive({
		userName:[{
			required:true,
			trigger:'blur',
			message:'登录编码不能为空'
		}],
		password:[{
			required:true,
			trigger:'blur',
			message:'密码为必填项'
		}]
	})
let formRef = ref(null)
	let router=useRouter()
	let submitForm = () => {
		router.push({
			path:'/grid/GridFeedBack'
			});
	   //    formRef.value.validate((valid) => {
	   //      if (valid) {
				// //请求后台
				// axios.get("http://localhost:8082/admins/login",
				// {
				// 	params:{
				// 		adminCode:user.userName,
				// 		password:user.password
				// 	}
				// })
				// .then(res=>{
				// 	//用户登录成功，向sessionStorage存储一个标识
					
				// 	let result=res.data
				// 	console.log(result);
				// 	if(result.code==0){
				// 		sessionStorage.setItem("isLogin",'ok')
				// 		//ElMessage.success('登录成功!');
				// 		//跳转到首页
				// 		router.push({
				// 			path:'/admin/index'
				// 			});
				// 	}else{
				// 		//提示失败原因
				// 		ElMessage.error(result.msg)
				// 	}
					
				// })
				// //如果后台后台返回成功
				// //就提示登录成功，跳转到后台管理首页
				// //如果登录失败，提示失败原因，不跳转
				
				
	   //      } else {
				// ElMessage.error('登录失败!');
				// return false;
	   //      }
	   //    })
	    }
</script>

<style scoped>
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: url('@/assets/jhk-1718933887037.jpg') no-repeat center center;
  background-size: cover;
}

.login-box {
  background-color: rgba(255, 255, 255, 0.8);
  padding: 100px; 
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  width: 400px;
  margin-bottom: 30px;
}

.input-group {
  width: 100%;
  margin-bottom: 30px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
}

.input-group input {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
  border-radius: 5px;
}
.input-group input::placeholder {
  color: #999; /* 设置提示文本颜色 */
}

@media (max-width: 600px) {
  .login-box {
    width: 90%;
  }

  .input-group {
    width: 90%;
  }
}

button {
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  border: none;
  color: white;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px; 
}

button:hover {
  background-color: #0056b3;
}
</style>
